$(function(){
    var left = $('#left');
    var right = $('#right');
    var line = $('#line');
    var left_behind = $('#left_behind');
    var right_behind = $('#right_behind');
    var left_position = 0;
    var right_position = 0;
    var low = $('.low');
    var up = $('.up')
    // 获取父盒子
    var bar_box = $('.bar_box');
   
    left.mousedown(function(e){
        $(this).css('z-index', 3);
        right.css('z-index', 2);
        left_p = e.clientX - left.position().left
        $(document).mousemove(function(e){
           left_position =  e.clientX - left_p
           if(left_position<0){
               left_position = 0;
           }
           if(left_position > bar_box.width() - left.width()){
               left_position = bar_box.width()- left.width()
           }
        left.css('left', left_position)
        left_behind.css('width', left_position)
        var lowzhi = (left_position / (bar_box.width()-left.width()))*30000;
        low.html(parseInt(lowzhi).toFixed(0))
        })
       $(document).mouseup(function(){
            $(document).unbind();
        })
    })
    right.mousedown(function(e){
        $(this).css('z-index', 3);
        left.css('z-index', 2)
        right_p  = e.clientX - right.position().left;
        $(document).mousemove(function(e){
            right_position = e.clientX - right_p;
            if(right_position < 0)
            {
                right_position = 0;
            }
            if(right_position > bar_box.width() - right.width())
            {
                right_position = bar_box.width() - right.width()
            }
            right.css('left', right_position);
            right_behind.css('width', bar_box.width() - right.width() - right_position)
            var upzhi = (right_position / (bar_box.width() - right.width() ))* 30000;
            up.html(parseInt(upzhi).toFixed(0))
            
        })
        $(document).mouseup(function(){
            $(document).unbind();
        })
    })
var shaixuan = $('.btn');
var mask = $('.mask')
var screen = $('.screen');
shaixuan.click(function(){
    mask.show();
    screen.animate({'left': 45});
})
mask.click(function(){
    screen.animate({'left': -300})
    $(this).hide();
})
})